<template>
  <div class="face-operate-container">
    <!-- 操作模式切换 -->
    <el-tabs v-model="activeTab" class="operate-tabs" @tab-click="handleTabChange">
      <el-tab-pane label="人脸搜索" name="search">
        <!-- 搜索区域 -->
        <div class="operation-card">
          <div class="upload-section">
            <el-upload
              action=""
              :show-file-list="false"
              :before-upload="handleSearchUpload"
              :disabled="searchLoading"
              class="upload-box"
            >
              <div v-if="!searchImage" class="upload-prompt">
                <el-icon :size="48" color="#cc1d29"><UploadFilled /></el-icon>
                <h3>点击上传搜索图片</h3>
                <p>支持JPG/PNG格式，建议尺寸500x500px</p>
              </div>
              <el-image
                v-else-if="searchResults.length==0"
                :src="searchImage"
                fit="contain"
                class="preview-image"
                style="width: 100%; height: 520px; object-fit: contain;"
              />
              <DrawRectImage style="width: 100%; height: 520px;" v-if="searchResults.length>0" :results="searchResults" :face-image="searchImage" />
            </el-upload>
          </div>

          <!-- 参数配置 -->
          <div class="config-section">
            <el-form label-width="120px" label-position="top">
              <el-form-item label="集合名称" class="param-item">
                <el-select
                  v-model="searchParams.collectionName"
                  placeholder="请选择集合"
                  class="collection-select"
                  popper-class="collection-select-dropdown"
                >
                  <el-option
                    v-for="col in collections"
                    :key="col.collectionName"
                    :label="col.collectionName"
                    :value="col.collectionName"
                  >
                    <div class="collection-option">
                      <el-icon><FolderOpened /></el-icon>
                      <span class="option-label">{{ col.collectionName }}</span>
                    </div>
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="相似度阈值" class="param-item">
                <div class="slider-container">
                  <div class="custom-slider">
                    <div class="slider-track">
                      <div
                        class="slider-fill"
                        :style="{ width: `${searchParams.confidenceThreshold}%` }"
                      ></div>
                      <div
                        class="slider-thumb"
                        :style="{ left: `${searchParams.confidenceThreshold}%` }"
                        @mousedown="startDragging($event, 'confidenceThreshold')"
                      ></div>
                    </div>
                  </div>
                  <span class="value-display">{{ (searchParams.confidenceThreshold).toFixed(0) }}%</span>
                </div>
              </el-form-item>

              <el-form-item label="质量分数阈值" class="param-item">
                <div class="slider-container">
                  <div class="custom-slider">
                    <div class="slider-track">
                      <div
                        class="slider-fill"
                        :style="{ width: `${searchParams.faceScoreThreshold}%` }"
                      ></div>
                      <div
                        class="slider-thumb"
                        :style="{ left: `${searchParams.faceScoreThreshold }%` }"
                        @mousedown="startDragging($event, 'faceScoreThreshold')"
                      ></div>
                    </div>
                  </div>
                  <span class="value-display">{{ (searchParams.faceScoreThreshold).toFixed(0) }}%</span>
                </div>
              </el-form-item>

              <el-form-item label="最大人脸数" class="param-item">
                <el-input-number
                  v-model="searchParams.maxFaceNum"
                  :min="1"
                  :max="10"
                  controls-position="right"
                  class="num-input"
                />
              </el-form-item>

              <el-form-item label="最大结果数" class="param-item">
                <el-input-number
                  v-model="searchParams.limit"
                  :min="1"
                  :max="50"
                  controls-position="right"
                  class="num-input"
                />
              </el-form-item>

              <el-button
                type="danger"
                :loading="searchLoading"
                class="operate-btn"
                @click="handleSearch"
              >
                <el-icon class="btn-icon"><Search /></el-icon>
                开始搜索
              </el-button>
            </el-form>
          </div>
        </div>

        <!-- 搜索结果 -->
<!--        <div v-if="searchResults.length" class="result-section">-->
<!--          <h3 class="section-title">匹配结果 ({{ searchResults.length }})</h3>-->
<!--          <div class="result-grid">-->
<!--            <div-->
<!--              v-for="(item, index) in searchResults"-->
<!--              :key="index"-->
<!--              class="result-card"-->
<!--              @mouseenter="handleHover(index)"-->
<!--              @mouseleave="activeIndex = -1"-->
<!--            >-->
<!--              <div class="similarity-tag" :style="getScoreStyle(item.score)">-->
<!--                {{ (item.score * 100).toFixed(1) }}%-->
<!--              </div>-->
<!--              <el-image-->
<!--                :src="item.faceImage || ''"-->
<!--                class="face-thumb"-->
<!--                :class="{ 'active-face': activeIndex === index }"-->
<!--              >-->
<!--                <template #error>-->
<!--                  <div class="error-tip">-->
<!--                    <el-icon><Picture /></el-icon>-->
<!--                    <span>图片加载失败</span>-->
<!--                  </div>-->
<!--                </template>-->
<!--              </el-image>-->
<!--              <div class="meta-info">-->
<!--                <div class="meta-row">-->
<!--                  <span class="label">样本ID：</span>-->
<!--                  <el-tooltip :content="item.sampleId">-->
<!--                    <span class="value">{{ truncateId(item.sampleId) }}</span>-->
<!--                  </el-tooltip>-->
<!--                </div>-->
<!--                <div class="meta-row">-->
<!--                  <span class="label">集合名称：</span>-->
<!--                  <span class="value">{{ item.collectionName }}</span>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
      </el-tab-pane>

      <!-- 人脸对比 -->
      <el-tab-pane label="人脸对比" name="compare">
        <div class="compare-container">
          <!-- 图片对比区域 -->
          <div class="compare-area">
            <div class="image-box" :class="{ active: compareImage1 }">
              <el-upload
                action=""
                :show-file-list="false"
                :before-upload="(file: File) => handleCompareUpload(file, 1)"
                class="compare-upload"
              >
                <template v-if="!compareImage1">
                  <el-icon :size="48" color="#cc1d29"><Plus /></el-icon>
                  <p>上传第一张图片</p>
                </template>
                <el-image
                  v-else-if="!compareResult"
                  :src="compareImage1"
                  fit="contain"
                  class="compare-image"
                  style="width: 100%; height: 520px; object-fit: contain;"
                />
                <DrawCompareImage style="width: 100%; height: 520px;" v-else :results="compareResult.faceInfo.locationA" :face-image="compareImage1"/>
              </el-upload>
            </div>

            <div class="vs-circle">
              <span>VS</span>
            </div>

            <div class="image-box" :class="{ active: compareImage2 }">
              <el-upload
                action=""
                :show-file-list="false"
                :before-upload="(file: File) => handleCompareUpload(file, 2)"
                class="compare-upload"
              >
                <template v-if="!compareImage2">
                  <el-icon :size="48" color="#cc1d29"><Plus /></el-icon>
                  <p>上传第二张图片</p>
                </template>
                <el-image
                  v-else-if="!compareResult"
                  :src="compareImage2"
                  fit="contain"
                  class="compare-image"
                  style="width: 100%; height: 520px; object-fit: contain;"
                />
                <DrawCompareImage style="width: 100%; height: 520px;" v-else :results="compareResult.faceInfo.locationB" :face-image="compareImage2"/>
              </el-upload>
            </div>
          </div>

          <!-- 对比结果 -->
          <div v-if="compareResult !== null" class="compare-result">
            <div class="score-box" :style="getScoreStyle(compareResult.confidence)">
              <span class="score-value">{{ (compareResult?.confidence).toFixed(1) }}%</span>
              <span class="score-label">相似度</span>
            </div>
          </div>

          <el-button
            type="danger"
            :loading="compareLoading"
            :disabled="!compareImage1 || !compareImage2"
            class="operate-btn compare-btn"
            @click="handleCompare"
          >
            <el-icon class="btn-icon"><Switch /></el-icon>
            开始比对
          </el-button>
        </div>
      </el-tab-pane>
    </el-tabs>

    <!-- 加载遮罩 -->
    <el-dialog
      v-model="loading"
      title="处理中"
      width="400px"
      :show-close="false"
      :close-on-click-modal="false"
      class="loading-modal"
    >
      <div class="loading-content">
        <el-icon class="loading-icon" :size="48"><Loading /></el-icon>
        <p class="loading-text">{{ loadingText }}</p>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { ElMessage, ElLoading } from 'element-plus'
import { UploadFilled, Search, Switch, Plus, Picture, Loading, FolderOpened } from '@element-plus/icons-vue'
import { searchApi, collectApi } from '@/utils/api'
import type { CompareResult, FaceSearchParams, SearchResult, CollectRepVo } from '@/utils/types'
import DrawRectImage from "@/components/Face/DrawRectsImage.vue";
import DrawCompareImage from "@/components/Face/DrawCompareImage.vue";

// 响应式状态
const activeTab = ref('search')
const searchImage = ref('')
const searchParams = ref<FaceSearchParams>({
  collectionName: '',
  namespace: 'namespace_1',
  imageBase64: '',
  limit: 10,
  confidenceThreshold: 70,
  faceScoreThreshold: 50,
  maxFaceNum: 5
})
const searchResults = ref<SearchResult[]>([])
const searchLoading = ref(false)

const compareImage1 = ref('')
const compareImage2 = ref('')
const compareResult = ref<CompareResult | null>(null)
const compareLoading = ref(false)

const loading = ref(false)
const progress = ref(0)
const loadingText = ref('正在处理...')
const activeIndex = ref(-1)

const dragging = ref(false)
const currentParam = ref<'confidenceThreshold' | 'faceScoreThreshold' | null>(null)

// 集合列表
const collections = ref<CollectRepVo[]>([])

// 加载集合列表
const loadCollections = async () => {
  try {
    const response = await collectApi.list('namespace_1')
    collections.value = response.data?.data || []
    // 如果有集合，默认选择第一个
    if (collections.value.length > 0) {
      searchParams.value.collectionName = collections.value[0].collectionName
    }
  } catch (error) {
    console.error('加载集合失败:', error)
  }
}

onMounted(() => {
  loadCollections()
})

// 计算属性
const getCompareConclusion = computed(() => (score: number) => {
  if (score > 0.85) return '高度相似'
  if (score > 0.7) return '较为相似'
  if (score > 0.5) return '可能相似'
  return '差异较大'
})

// 方法
const handleSearchUpload = async (file: File) => {
  const loader = ElLoading.service({ lock: true, text: '图片解析中...' })
  try {
    searchImage.value = await convertToBase64(file)
    console.log(searchImage.value)
    searchParams.value.imageBase64 = searchImage.value.split(',')[1]
    // 清空原有结果
    searchResults.value=[]
  } catch (error) {
    ElMessage.error('图片上传失败')
  } finally {
    loader.close()
  }
}

const handleSearch = async () => {
  if (!searchParams.value.imageBase64) {
    ElMessage.warning('请先上传搜索图片')
    return
  }

  searchLoading.value = true
  loading.value = true
  try {
    const response = await searchApi.faceSearch(searchParams.value)
    searchResults.value = response.data?.data || []
  } catch (error) {
    ElMessage.error('搜索失败')
  } finally {
    searchLoading.value = false
    loading.value = false
  }
}

const handleCompareUpload = async (file: File, type: 1 | 2) => {
  const loader = ElLoading.service({ text: '上传图片中...' })
  try {
    const base64 = await convertToBase64(file)
    if (type === 1) {
      compareImage1.value = base64
    } else {
      compareImage2.value = base64
    }
  } catch (error) {
    ElMessage.error('图片上传失败')
  } finally {
    loader.close()
  }
}

const handleCompare = async () => {
  if (!compareImage1.value || !compareImage2.value) return

  compareLoading.value = true
  loading.value = true
  try {
    const response = await searchApi.faceCompare({
      imageBase64A: compareImage1.value.split(',')[1],
      imageBase64B: compareImage2.value.split(',')[1]
    })
    compareResult.value = response.data?.data || null
  } catch (error) {
    ElMessage.error('比对失败')
  } finally {
    compareLoading.value = false
    loading.value = false
  }
}

const convertToBase64 = (file: File) => {
  return new Promise<string>((resolve, reject) => {
    const reader = new FileReader()
    reader.onload = () => resolve(reader.result as string)
    reader.onerror = reject
    reader.readAsDataURL(file)
  })
}

const truncateId = (id: string) => id.slice(0, 6) + '...' + id.slice(-4)

const getScoreStyle = (score: number) => ({
  backgroundColor: `rgba(204,29,41,${score * 0.8})`,
  boxShadow: `0 2px 8px rgba(204,29,41,${score * 0.4})`
})

const handleHover = (index: number) => {
  activeIndex.value = index
}

const handleTabChange = () => {
  searchResults.value = []
  compareResult.value = null
}

const startDragging = (event: MouseEvent, param: 'confidenceThreshold' | 'faceScoreThreshold') => {
  event.preventDefault()
  dragging.value = true
  currentParam.value = param

  const handleMove = (e: MouseEvent) => {
    if (!dragging.value || !currentParam.value) return

    const slider = (event.target as HTMLElement)?.closest('.slider-track') as HTMLElement
    if (!slider) return

    const rect = slider.getBoundingClientRect()
    const x = Math.max(0, Math.min(e.clientX - rect.left, rect.width))
    let value = (x / rect.width)*100
    // 将值四舍五入到最接近的0.05
    value = Math.round(value * 20) / 20
    value = Math.max(0, Math.min(100, value))
    searchParams.value[currentParam.value] = value
  }

  const handleUp = () => {
    dragging.value = false
    currentParam.value = null
    document.removeEventListener('mousemove', handleMove)
    document.removeEventListener('mouseup', handleUp)
  }

  document.addEventListener('mousemove', handleMove)
  document.addEventListener('mouseup', handleUp)
}
</script>

<style lang="scss" scoped>
.face-operate-container {
  width: 100%;
  margin: 0 auto;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
  height: 100%;

  .operate-tabs {
    :deep(.el-tabs__header) {
      margin: 0 0 20px;
    }

    :deep(.el-tabs__nav-wrap::after) {
      background-color: transparent;
    }

    :deep(.el-tabs__item) {
      font-size: 17.6px;
      color: #666;
      transition: all 0.3s;

      &.is-active {
        color: #cc1d29;
        font-weight: 600;
      }
    }

    :deep(.el-tabs__active-bar) {
      background-color: #cc1d29;
      height: 3px;
    }
  }

  .operation-card {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 24px;
    border: 1px solid #e0e3e8;
    border-radius: 12px;
    padding: 24px;
    min-height: 580px;
  }

  .upload-section {
    height: 100%;

    .upload-box {
      border: 2px dashed #e0e3e8;
      border-radius: 8px;
      height: 520px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s;
      background: var(--detail-section-background);
      overflow: hidden;
      padding: 12px;

      &:hover {
        border-color: #cc1d29;
        box-shadow: 0 4px 12px rgba(204, 29, 41, 0.1);
      }

      .upload-prompt {
        text-align: center;

        h3 {
          margin: 16px 0 8px;
          font-size: 19.2px;
        }

        p {
          color: #aaa;
          font-size: 14.4px;
        }
      }

      .preview-image {
        display: block;
      }
    }
  }

  .config-section {
    display: flex;
    flex-direction: column;

    .el-form {
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .param-item {
      margin-bottom: 24px;

      &:last-of-type {
        margin-bottom: 32px;
      }

      :deep(.el-form-item__label) {
        padding-bottom: 8px;
        font-size: 15px;
        color: #333;
        line-height: 1.4;
      }

      .slider-container {
        display: flex;
        align-items: center;
        gap: 16px;
        width: 100%;

        .custom-slider {
          flex: 1;
          height: 40px;
          position: relative;
          cursor: pointer;

          .slider-track {
            position: absolute;
            top: 50%;
            left: 12px;
            right: 12px;
            transform: translateY(-50%);
            height: 6px;
            background: #f0f2f5;
            border-radius: 3px;
            overflow: visible;

            .slider-fill {
              position: absolute;
              top: 0;
              left: 0;
              height: 100%;
              background: linear-gradient(90deg, #cc1d29, #ff4757);
              border-radius: 3px;
              transition: width 0.15s ease;
            }

            .slider-thumb {
              position: absolute;
              top: 50%;
              transform: translate(-50%, -50%);
              width: 20px;
              height: 20px;
              background: #fff;
              border: 2px solid #cc1d29;
              border-radius: 50%;
              cursor: grab;
              transition: all 0.2s ease;
              box-shadow: 0 2px 6px rgba(204, 29, 41, 0.2);
              z-index: 1;

              &:hover {
                transform: translate(-50%, -50%) scale(1.15);
                box-shadow: 0 4px 8px rgba(204, 29, 41, 0.3);
                border-width: 3px;
              }

              &:active {
                cursor: grabbing;
                transform: translate(-50%, -50%) scale(1.1);
                background: #fff5f5;
              }
            }
          }
        }

        .value-display {
          min-width: 60px;
          padding: 6px 12px;
          text-align: center;
          background: var(--detail-section-background);
          border-radius: 6px;
          color: #cc1d29;
          font-weight: 600;
          font-size: 14px;
          transition: all 0.3s ease;
          border: 1px solid rgba(204, 29, 41, 0.1);
          flex-shrink: 0;

          &:hover {
            border-color: rgba(204, 29, 41, 0.2);
          }
        }
      }

      .num-input {
        width: 100%;

        :deep(.el-input-number__decrease),
        :deep(.el-input-number__increase) {
          background: var(--detail-section-background);
          border-color: #e0e3e8;

          &:hover {
            color: #cc1d29;
          }
        }

        :deep(.el-input__inner) {
          text-align: center;
        }
      }
    }

    .operate-btn {
      margin-top: auto;
      width: 100%;
      height: 48px;
      font-size: 17.6px;
      background: linear-gradient(135deg, #cc1d29, #ff4757);
      border: none;
      transition: all 0.3s;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(204, 29, 41, 0.3);
      }

      .btn-icon {
        margin-right: 8px;
      }
    }
  }

  .result-section {
    margin-top: 32px;

    .section-title {
      color: #333;
      font-size: 22.4px;
      margin-bottom: 24px;
      padding-bottom: 8px;
      border-bottom: 2px solid #eee;
    }

    .result-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      gap: 24px;
    }

    .result-card {
      position: relative;
      background: var(--detail-section-background);
      border-radius: 8px;
      overflow: hidden;
      transition: all 0.3s;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

      &:hover {
        transform: translateY(-4px);
      }

      .similarity-tag {
        position: absolute;
        top: 12px;
        right: 12px;
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 14.4px;
        z-index: 2;
      }

      .face-thumb {
        width: 100%;
        height: 260px;
        background: var(--detail-section-background);

        &.active-face {
          transform: scale(1.02);
        }
      }

      .error-tip {
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .el-icon {
          font-size: 32px;
          margin-bottom: 8px;
        }
      }

      .meta-info {
        padding: 16px;

        .meta-row {
          display: flex;
          align-items: center;
          margin-bottom: 8px;
          font-size: 14.4px;

          .label {
            margin-right: 8px;
            white-space: nowrap;
          }

          .value {
            font-weight: 500;
          }
        }
      }
    }
  }

  .compare-container {
    border: 1px solid #e0e3e8;
    background: var(--detail-section-background);
    border-radius: 12px;
    min-height: 580px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;

    .compare-area {
      display: flex;
      justify-content: center;
      gap: 140px;
      padding: 0 32px;
      margin-top: 0;
      position: relative;

      .image-box {
        flex: 1;
        max-width: 400px;
        height: 500px;
        border: 2px dashed #e0e3e8;
        border-radius: 12px;
        transition: all 0.3s;
        background: #fff;
        overflow: hidden;

        &.active {
          border-color: #cc1d29;
          box-shadow: 0 4px 16px rgba(204, 29, 41, 0.1);
        }

        .compare-upload {
          background: var(--background-color);
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          cursor: pointer;

          .el-icon {
            margin-bottom: 16px;
            font-size: 48px;
            color: #cc1d29;
          }

          p {
            color: #666;
            font-size: 15px;
          }

          .compare-image {
            width: 100%;
            height: 100%;
            display: block;
          }
        }
      }

      .vs-circle {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 64px;
        height: 64px;
        background: linear-gradient(135deg, #cc1d29, #ff4757);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: bold;
        font-size: 20px;
        box-shadow: 0 4px 16px rgba(204, 29, 41, 0.3);
        z-index: 1;
      }
    }

    .compare-result {
      text-align: center;
      animation: fadeIn 0.3s ease;
      margin: 0 auto;
      width: 100%;
      max-width: 600px;

      .score-box {
        display: inline-flex;
        flex-direction: column;
        background: linear-gradient(135deg, #cc1d29, #ff4757);
        color: white;
        padding: 16px 40px;
        border-radius: 12px;
        margin-bottom: 16px;
        box-shadow: 0 4px 16px rgba(204, 29, 41, 0.2);

        .score-value {
          font-size: 48px;
          font-weight: 800;
          line-height: 1;
        }

        .score-label {
          font-size: 15px;
          opacity: 0.9;
          margin-top: 8px;
        }
      }
    }

    .compare-btn {
      width: 240px;
      height: 48px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 17px;
      background: linear-gradient(135deg, #cc1d29, #ff4757);
      border: none;
      border-radius: 8px;
      transition: all 0.3s;

      .btn-icon {
        margin-right: 8px;
        font-size: 20px;
      }

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(204, 29, 41, 0.3);
      }

      &:disabled {
        opacity: 0.7;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
      }
    }
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.loading-modal {
  :deep(.el-dialog__header) {
    display: none;
  }

  :deep(.el-dialog__body) {
    padding: 32px;
  }

  .loading-content {
    text-align: center;

    .loading-icon {
      color: #cc1d29;
      animation: rotate 2s linear infinite;
      margin-bottom: 16px;
    }

    .loading-text {
      color: #666;
    }
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 768px) {
  .face-operate-container {
    padding: 16px;

    .operation-card {
      grid-template-columns: 1fr;
    }

    .compare-container {
      padding: 24px;

      .compare-area {
        flex-direction: column;
        gap: 48px;
        padding: 0;

        .image-box {
          max-width: none;
          aspect-ratio: 1;
        }

        .vs-circle {
          position: static;
          transform: none;
          margin: -24px auto;
        }
      }

      .compare-result {
        padding: 16px;
      }
    }
  }
}

.threshold-section {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 24px;
  background: #fff;

  .section-title {
    color: var(--primary-color);
    font-size: 15px;
    margin: 0 0 20px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
  }

  :deep(.el-form-item) {
    margin-bottom: 32px;

    &:last-child {
      margin-bottom: 0;
    }

    .el-form-item__label {
      padding-bottom: 12px;
      font-size: 14px;
      color: #333;
      font-weight: 500;
    }
  }

  .slider-container {
    .slider-header {
      display: flex;
      justify-content: flex-end;
      margin-bottom: 8px;

      .value-display {
        background: var(--detail-section-background);
        color: white;
        padding: 4px 12px;
        border-radius: 12px;
        font-size: 14px;
        font-weight: 500;
        min-width: 60px;
        text-align: center;
        box-shadow: 0 2px 6px rgba(255, 77, 79, 0.2);
      }
    }

    .custom-slider {
      margin: 10px 0;

      :deep(.el-slider__runway) {
        height: 6px;
        background-color: #f0f2f5;
        border-radius: 3px;

        .el-slider__bar {
          background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
          height: 6px;
          border-radius: 3px;
        }

        .el-slider__button-wrapper {
          width: 24px;
          height: 24px;
          top: -9px;
        }

        .el-slider__button {
          width: 20px;
          height: 20px;
          border: 2px solid var(--primary-color);
          background: white;
          transition: all 0.2s ease;

          &:hover {
            transform: scale(1.1);
            box-shadow: 0 0 10px rgba(255, 77, 79, 0.3);
          }
        }
      }
    }

    .slider-tip {
      margin-top: 12px;
      color: #666;
      font-size: 13px;
      line-height: 1.5;
      padding: 8px 12px;
      background: #fff5f5;
      border-radius: 4px;
      border-left: 3px solid var(--primary-color);
    }
  }
}

.collection-select {
  width: 100%;

  :deep(.el-input__wrapper) {
    background-color: var(--detail-section-background);
    border-radius: 8px;
    box-shadow: none;
    border: 1px solid #e0e3e8;
    transition: all 0.3s;

    &:hover {
      border-color: #cc1d29;
    }

    &.is-focus {
      border-color: #cc1d29;
      box-shadow: 0 0 0 1px #cc1d29;
    }

    .el-input__inner {
      font-size: 14px;
      color: #333;
    }

    .el-select__caret {
      color: #999;
      transition: all 0.3s;

      &.is-reverse {
        transform: rotateZ(180deg);
      }
    }
  }
}

.collection-option {
  display: flex;
  align-items: center;
  gap: 8px;

  .el-icon {
    font-size: 16px;
    color: #cc1d29;
  }

  .option-label {
    font-size: 14px;
  }
}

:deep(.collection-select-dropdown) {
  border-radius: 8px;
  padding: 8px;
  border: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);

  .el-select-dropdown__item {
    border-radius: 6px;
    margin: 4px 0;
    padding: 10px 12px;

    &.selected {
      background: #fff5f5;
      color: #cc1d29;
      font-weight: 600;
    }

    &:hover {
      background: #fff5f5;
    }
  }
}
</style>
